import VueRouter from "vue-router";

const router = new VueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: () => import('@/pages/About.vue')
        },
        {
            path: '/home',
            component: () => import('@/pages/Home.vue'),
            children: [
                {
                    path: 'news',
                    component: () => import('@/pages/News.vue'),
                },
                {
                    path: 'message',
                    component: () => import('@/pages/Message.vue'),
                    children: [
                        {
                            name: 'xiangqing',
                            // path: 'detail/:id/:title/:content', // 第一种和第二种props传的是params使用这种占位符
                            path: 'detail',// 第三种props可以传 params 或 query ，记得 使用router-link的地方 :to='' 里面要和这里相同，这里是query形式的path，那边就要写query
                            component: () => import('@/pages/Detail.vue'),
                            // 路由 props 第一种，值为对象的写法。该对象中所有 key-value 都会以 props 的形式传给 Detail组件
                            // props: { val1: 1, val2: 'hello' },
                            // 路由 props 第二种，值为布尔值的写法。若为真，就会把路由组件收到的所有 params 参数，以 props 形式传给 Detail组件
                            // props: true,

                            // 路由 props 第三种，值为回调函数的写法。params、query参数都可以接收
                            // 参数可以解构，比如我只需要 $route.query里面的id和title，function({query:id,title})
                            props: function ($route) { 
                                // 返回值必须是对象
                                // 1. 如果路由的 path配置项 是 params形式 就传 params
                                // return { id: $route.params.id, title: $route.params.title, content: $route.params.content }
                                // 2. 如果路由的 path配置项 是 query形式 就传 query
                                return { id: $route.query.id, title: $route.query.title, content: $route.query.content }
                            }
                        },
                    ],
                },
            ]
        }
    ]
})

export default router